<template>
	<view class="bill">
		
		<view class="hb-header">
			<text class="first-text">交易日期</text>
			<view :class="['date',{'date-active': otherFlag == 0}]">
				<picker mode="date" :value="dateL" :start="startDate" :end="endDate" @change="onDate_l">
					<view class="date-text">{{dateL}}</view>
				</picker>
			</view>
			<text class="two-text">-</text>
			<view :class="['date',{'date-active': otherFlag == 0}]">
			<picker mode="date" :value="dateR" :start="dateL" :end="endDate" @change="onDate_r">
				<view class="date-text">{{dateR}}</view>
			</picker>
			</view>		
		</view>
		<view class="other-box" @click="onOther">
			<view :class="['other',{'other-active': otherFlag == 1}]" id="1">
			本日
			</view>
			<view :class="['other',{'other-active': otherFlag == 2}]" id="2">
			本周
			</view>
			<view :class="['other',{'other-active': otherFlag == 3}]" id="3">
			本月
			</view>
			<view :class="['other',{'other-active': otherFlag == 4}]" id="4">
			本年
			</view>
			
		</view>
		
		<view class="refund">
			<view class="title">
				<view class="box border-bottom">
					<view class="box-item">
						<text>平台提成总计</text>
					</view>
					<view class="box-item">
						<text>店家入账总计</text>
					</view>
				</view>
				<view class="box">
					<view class="box-item box-item1">
						<text>{{dataList.order_num}}</text>
					</view>
					<view class="box-item box-item2">
						<text>{{dataList.platform_take}}</text>
					</view>
				</view>
			</view>
			
			<view class="conter" v-for="(item,index) in dataList.order_list" :key="index">
				<view class="conter-top">
					<view class="tp-item1">
						订单号:{{item.orid}}
					</view>
					<view class="tp-item2">
						{{item.order_time}}
					</view>
				</view>
				<view class="conter-img-price">
					<image :src="item.pro_img" mode="aspectFill"></image>
					<view class="price">
						
						{{item.pro_name}}
					</view>
					<view class="line3">
						{{item.order_price}}
					</view>
				</view>
				<view class="conter-time1">
					<text>店家入账：</text>
					<text>{{ item.store_entry }}</text>
				</view>
				<view class="conter-time2">
					<text>平台提成：</text>
					<text>{{ item.platform_take}}</text>
				</view>
			</view>
		</view>

		<!-- <mx-date-picker :show="showPicker" :type="type" :value="value" :show-tips="true" :begin-text="'入住'" :end-text="'离店'"
		 :show-seconds="true" @confirm="onSelected" @cancel="onSelected" /> -->
		 
	</view>
</template>

<script>
	// import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	export default {
		// components: {
		// 	MxDatePicker
		// },
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				dateL: currentDate,
				dateR: currentDate,
				otherFlag: '1', //0: 本月 1：本周 2：本日
				price1: '￥36.00', // 
				price2: '￥3.60', // 
				
				status: 0,
				issueFlag: false,
				dataList: [], // 所有数据
				showPicker: false,
				startTime: '2019/01/01',
				endTime: '2019/01/01',
				datetime: '2019/01/01 15:00:12',
				range: ['2019/01/01', '2019/01/06'],
				rangetime: ['2019/01/08 14:00', '2019/01/16 13:59'],
				type: 'rangetime',
				value: ''
			};
		},
		computed: {
			startDate() {
				return this.getDate('start'); 
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad() {
			this.getBill();
		},
		methods: {
			async getBill() {
				if(this.otherFlag == '0') {
					uni.showLoading({
						title: '订单获取中'
					})
					let a = await this.$http.billManage({start_time: this.dateL,end_time: this.dateR})
					this.dataList = a.data;
					uni.hideLoading()
					console.log(a)
					return
				}
				uni.showLoading({
					title: '订单获取中'
				})
				let a = await this.$http.billManage({timeType: this.otherFlag});
				this.dataList = a.data;
				uni.hideLoading()
			},
			
			onOther(e){ // 选择时间段
				this.otherFlag = e.target.id;
				this.getBill();
			},
			onDate_l(e) { // 日期选择的左边
				this.dateL = e.detail.value;
				this.otherFlag = '0';
			},
			onDate_r(e) { // 日期选择的右边
				this.dateR = e.detail.value;
				this.otherFlag = '0';
				this.getBill();
			},
			getDate(type) { //时间格式化
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
			
				if (type === 'start') {
					year = year - 5;
				} else if (type === 'end') {
					year = year + 5;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},

			onShowDatePicker(type, statu) { //显示
				this.type = type;
				this.showPicker = true;
				this.value = this[type];
				if (statu == 1) {
					this.status = 1
				}
			},
			onSelected(e) { //选择开始时间
				if (e) {
					if (this.status == 1) {
						this.startTime = e.value
					} else {
						this.endTime = e.value
					}
				}
				this.showPicker = false;

				// this.tableData.time.push(item.time)
				// this.tableData.info.push(item.info)
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import 'static/css/myStore.scss';
</style>
